<template>
  <div class="app-container">
    <template v-if="!addArticleShow">
      <el-row :gutter="20" class="decoration-knowledge-row">
        <el-col :span="8" class="decoration-knowledge-col">
          <SideTabs
            :tablist="tablist"
            title="装修知识分类管理"
            description=""
            @changeTab="handleChangeTab"
          >
            <template #right>
              <el-button :icon="Plus" type="plain" size="small" @click="handleAddClassfify" />
            </template>
            <template #action="{ item }">
              <el-icon class="tab-icon" @click.stop="handleEditClick(item)">
                <Edit />
              </el-icon>
              <el-icon @click.stop="handleDeleteAction(item)">
                <Delete />
              </el-icon>
            </template>
          </SideTabs>
        </el-col>
        <el-col :span="16" class="decoration-knowledge-col bg-white">
          <div class="flex justify-start m-[20px]">
            <el-button type="success" icon="plus" @click="handleAddArticle('add')">新增</el-button>
          </div>
          <ArticleList
            ref="articleListRef"
            v-model:categoryId="activeTab"
            :type="articleType.KNOWLEDGE.type"
            @editArticle="handleAddArticle('edit', $event)"
            @preview="handlePreview"
          />
        </el-col>
      </el-row>

      <!-- 添加类别 -->
      <AddKnowledgeClassify
        v-model:dialogShow="dialogAddClassifyShow"
        :title="addModeltitle"
        :defaultData="editingCategory"
        @update:dialogShow="handleUpdateDialogShow"
      />
      <SelectArticleDialog
        v-model:dialogShow="selectArticleDialogShow"
        :type="1"
        @getTemplateType="getTemplateType"
      />
    </template>
    <template v-else>
      <!-- 添加装修知识- 图文 -->
      <AddArticleNormal
        v-if="showTemplate == 1"
        :defaultData="activeArticle"
        :type="articleType.KNOWLEDGE.type"
        @backTo="handleBackTo"
        @refreshList="initList"
      />
      <!-- 添加装修知识 - 图文交叉 -->
      <AddArticle
        v-if="showTemplate == 2"
        :type="articleType.KNOWLEDGE.type"
        :defaultData="activeArticle"
        @backTo="handleBackTo"
      />
      <!-- 1 是装修知识的type固定字段 -->
      <!-- 富文本模版 -->
      <AddEditor
        v-if="showTemplate == 3"
        :type="articleType.KNOWLEDGE.type"
        :defaultData="activeArticle"
        :hasCategory="true"
        @backTo="handleBackTo"
      ></AddEditor>
    </template>
  </div>
  <PreViewArticle v-model="previewDialogVisible" :articleData="activeArticle" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import PreViewArticle from "../components/preViewArticle/index.vue";
import SideTabs from "@/components/SideTabs/index.vue";
import AddKnowledgeClassify from "./add-knowledge-classify.vue";
import ArticleList from "../components/ArticleList.vue";
import AddArticle from "../components/addArticle/index.vue";
import AddEditor from "../components/addEditor/index.vue";
import SelectArticleDialog from "../components/select-article-dialog.vue";
import AddArticleNormal from "../components/addArticleNormal/index.vue";
import { articleType } from "@/utils/enums/article";
import { getDecorationCategory, getArticleDetail, deleteDecorationCategory } from "@/api/article";
import { Plus } from "@element-plus/icons-vue";
const tablist = ref([]);
const dialogAddClassifyShow = ref(false);
const addArticleShow = ref(false);
const selectArticleDialogShow = ref(false);
const addArticleNormalShow = ref(false);
const activeArticle = ref(null);
const activeTab = ref("");
const addModeltitle = ref("新增知识分类");
const editingCategory = ref(null);
const articleListRef = ref(null);
const showTemplate = ref(null);
onMounted(async () => {
  getCategoryList();
});
/***
 *
 *
 * 分类 - 装修分类的操作
 *
 *
 */
// 获取分类列表
const getCategoryList = async () => {
  try {
    let { list } = await getDecorationCategory(articleType.KNOWLEDGE.type);
    tablist.value = list;
    activeTab.value = tablist.value[0].id;
  } catch (err) {
    console.log(err, "err");
  } finally {
  }
};
// 删除分类
const handleDeleteAction = async (item) => {
  try {
    await deleteDecorationCategory(item.id);
  } catch (err) {
    console.log(err, "err");
  } finally {
    getCategoryList();
  }
  // 处理删除逻辑
};
const handleChangeTab = (tab) => {
  console.log(tab, "tab");
  activeTab.value = tab;
};
// 新增分类
const handleAddClassfify = () => {
  addModeltitle.value = "新增知识分类";
  editingCategory.value = null;
  dialogAddClassifyShow.value = true;
};
// 编辑分类
const handleEditClick = (item) => {
  addModeltitle.value = "编辑知识分类";
  editingCategory.value = { ...item };
  dialogAddClassifyShow.value = true;
};
const handleUpdateDialogShow = (show) => {
  dialogAddClassifyShow.value = show;
  getCategoryList();
  console.log("哪里在执行2");
  console.log(1233213);

  // showTemplate.value = 3

  // addArticleShow.value = true
  // addArticleNormalShow.value = false
  // selectArticleDialogShow.value = false
};
const handleAddArticle = async (type, row) => {
  // 新增- 把之前编辑过的文章默认值去掉，展示选择模版弹框
  if (type === "add") {
    activeArticle.value = null;
    // selectArticleDialogShow.value = true
    addArticleShow.value = true;
    addArticleNormalShow.value = false;
    showTemplate.value = 3;
  } else {
    await getArticleDetailFunc(row.id);
    getTemplateType(row.templateType);
  }
};
/**
 * 编辑文章： 查询文章详情,传入对应编辑组件
 */
async function getArticleDetailFunc(id) {
  try {
    const data = await getArticleDetail(id);
    activeArticle.value = data;
    console.log(activeArticle.value, "activeArticle");
  } catch (err) {
    console.log(err, "err");
  } finally {
  }
}
// 选择文章模版
// 1. 图文展示模版
// 2. 图文交叉模版
const getTemplateType = (templateType) => {
  console.log(templateType, "templateType");
  showTemplate.value = templateType;
  // if (templateType == '1') {
  //   addArticleNormalShow.value = true
  //   // 图文展示模版
  // } else if (templateType == '2' || templateType == '3') {
  //   // 图文交叉模版
  //   addArticleShow.value = true
  // }
  addArticleShow.value = true;
  addArticleNormalShow.value = false;
  selectArticleDialogShow.value = false;
};
const handleBackTo = () => {
  addArticleShow.value = false;
};
const initList = () => {
  articleListRef.value.initList();
};
/**
 * 预览功能
 *
 */
const previewDialogVisible = ref(false);
const handlePreview = async (row) => {
  console.log(row, "row");
  await getArticleDetailFunc(row.id);
  previewDialogVisible.value = true;
};
</script>

<style scoped>
.app-container {
  display: flex;

  .decoration-knowledge-row {
    flex: 1;
  }

  .decoration-knowledge-col {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>
